<template>
	<view class="page">
		<view class="main">
			<!-- 知识点区域 -->
			<view class="bg-white padding">
				<u-text bold color="#333333" size="32rpx" text="知识点"></u-text>
				<view class="knowledge-content">
					<u-text size="24rpx" text="10以内加减法"></u-text>
				</view>
				<view class="flex margin-top-sm">
					<u-text color="#999" size="24rpx" text="错题来源：错题重练"></u-text>
					<u-text align="right" color="#999" size="24rpx" text="2025-10-03"></u-text>
				</view>
			</view>

			<!-- 题目内容 -->
			<view class="bg-white padding margin-top">
				<u-text bold color="#333333" size="32rpx" text="题目"></u-text>
				<view class="margin-top-sm">
					<u-text size="24rpx" text="如图是由许多等号的等腰直角三角形黑白交错排列而成的正方形，一只蚂蚁在上面自由爬行，那么蚂蚁停留在黑色涂抹上的概率是______。"></u-text>
				</view>
			</view>

			<!-- 答案解析 -->
			<view class="bg-white padding margin-top">
				<u-text bold color="#333333" size="32rpx" text="答案"></u-text>
				<view class="margin-top-sm">
					<u-text size="24rpx" text="如图是由许多等号的等腰直角三角形黑白交错排列而成的正方形，一只蚂蚁在上面自由爬行，那么蚂蚁停留在黑色涂抹上的概率是______。"></u-text>
				</view>
				<u-text bold margin="20rpx 0 0 0" color="#333333" size="32rpx" text="【解析】"></u-text>
				<view class="margin-top-sm">
					<u-text size="28rpx" text="如图是由许多等号的等腰直角三角形黑白交错排列而成的正方形，一只蚂蚁在上面自由爬行，那么蚂蚁停留在黑色涂抹上的概率是______。"></u-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 页面数据
onLoad(() => {
	console.log('题目详情页面加载完成')
	uni.setNavigationBarTitle({
		title: '10以内的加减法'
	})
})
</script>

<style scoped lang="scss">
/* 知识点区域 */
.knowledge-section {
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
}

.section-title {
	padding: 32rpx 32rpx 24rpx 32rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.title-text {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
}

.knowledge-content {
	background: #F7F7F7;
	border-radius: 50rpx;
	padding: 20rpx 30rpx;
	margin-top: 20rpx;
}

.knowledge-text {
	font-size: 32rpx;
	color: #333333;
}

/* 更改掌握率区域 */
.mastery-section {
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
}

.mastery-selector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.mastery-label {
	font-size: 32rpx;
	color: #333333;
}

.selector-right {
	display: flex;
	align-items: center;
}

.mastery-value {
	font-size: 32rpx;
	color: #333333;
	margin-right: 16rpx;
}

/* 底部保存按钮 */
.save-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32rpx;
	background-color: #FFFFFF;
	border-top: 1rpx solid #F0F0F0;
}
</style>
